import React, { memo, Suspense } from 'react'
import styled from 'styled-components'
import { BrowserRouter } from 'react-router-dom'
import routes from './router'

import { renderRoutes } from 'react-router-config'
import { TabBar } from '@/components'

function App() {
  return (
    <AppWrapper>
      <BrowserRouter>
        <Suspense fallback={<div>loading</div>}>
          {renderRoutes(routes)}
        </Suspense>
        <TabBar />
      </BrowserRouter>
    </AppWrapper>
  )
}

export default memo(App)

const AppWrapper = styled.div`
  min-height: 100vh;
`
